<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>局部组件注册</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <todo></todo>
  </div>

  <script>
    // 局部组件注册
    let todoAdd = {
      template: `<div><input type="text"><button>+</button></div>`
    }
    let todoItem = {
      template: `<li>1 - 吃饭 <a href="javascript:;">×</a></li>`
    }
    let todoList = {
      template: `
        <ul>
          <todo-item/>
          <todo-item/>
          <todo-item/>
        </ul>`,
      components: {
        todoItem
      }
    };

    // 全局组件注册
    Vue.component("todo", {
      template: `
        <div>
          <h1>待办事件列表</h1>
          <todo-add/>
          <todo-list/>
        </div>`,
      components: {
        todoAdd,
        todoList
      }
    })

    new Vue({
      el: "#app"
    });
  </script>
</body>

</html>